import { ref, reactive, defineComponent } from "vue";
import { Inventory } from "@/api/interface";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { getPageReport } from "@/api/modules/reporting";
import { formatDate } from "@/utils/date-formatter";
import type { TableColumnCtx } from "element-plus";

export default defineComponent({
  setup(): () => JSX.Element {
    const proTable = ref<ProTableInstance>();

    // 新建默认数据
    const initData = reactive({
      reportId: 106
    });

    const column1: ColumnProps<Inventory.ResCustomList>[] = [
      {
        type: "index",
        label: "序号",
        width: 80,
        search: {
          el: "date-picker",
          label: "日期",
          minWidth: 164,
          key: "dataTimeRange",
          defaultValue: [formatDate(-6, "start", "yyyy-MM-dd"), formatDate(0, "end", "yyyy-MM-dd")],
          props: {
            type: "datetimerange",
            format: "YYYY-MM-DD",
            valueFormat: "YYYY-MM-DD"
          }
        }
      },
      {
        sortable: true,
        prop: "appointType",
        label: "类型",
        align: "left",
        minWidth: 120,
        isShow: false,
        enum: [
          {
            name: "桌台",
            value: 1
          },
          {
            name: "区域",
            value: 2
          }
        ],
        search: { el: "select", defaultValue: 1 },
        fieldNames: { label: "name", value: "value" }
      },
      {
        sortable: true,
        prop: "deskName",
        label: "桌台名称"
      },
      { prop: "deskCategoryName", label: "区域名称" },
      {
        sortable: true,
        prop: "manQty",
        label: "标准用餐人数",
        width: 140
      },
      {
        sortable: true,
        prop: "amount",
        label: "营业额"
      },
      {
        sortable: true,
        prop: "allAmount",
        label: "营业收入"
      },
      {
        sortable: true,
        prop: "reduceAmount",
        label: "优惠金额"
      },
      {
        sortable: true,
        prop: "quantity",
        label: "消费桌数"
      },
      {
        sortable: true,
        prop: "person",
        label: "用餐人数"
      },
      {
        sortable: true,
        prop: "avgPersonAmount",
        label: "折前人均"
      },
      {
        sortable: true,
        prop: "avgDiscountPersonAmount",
        label: "折后人均"
      },
      {
        sortable: true,
        prop: "avgDeskAmount",
        label: "折前桌均"
      },
      {
        sortable: true,
        prop: "avgDiscountDeskAmount",
        label: "折后桌均"
      }
      // { prop: "storeName", label: "门店名称", minWidth: 120, align: "left" }
    ];

    const column2: ColumnProps<Inventory.ResCustomList>[] = [
      {
        type: "index",
        label: "序号",
        width: 80,
        search: {
          el: "date-picker",
          label: "日期",
          minWidth: 164,
          key: "dataTimeRange",
          defaultValue: [formatDate(-6, "start", "yyyy-MM-dd"), formatDate(0, "end", "yyyy-MM-dd")],
          props: {
            type: "datetimerange",
            format: "YYYY-MM-DD",
            valueFormat: "YYYY-MM-DD"
          }
        }
      },
      {
        sortable: true,
        prop: "appointType",
        label: "类型",
        align: "left",
        minWidth: 120,
        isShow: false,
        enum: [
          {
            name: "桌台",
            value: 1
          },
          {
            name: "区域",
            value: 2
          }
        ],
        search: { el: "select", defaultValue: 1 },
        fieldNames: { label: "name", value: "value" }
      },
      {
        sortable: true,
        prop: "deskName",
        label: "桌台名称"
      },
      { sortable: true, prop: "deskCategoryName", label: "区域名称" },
      { sortable: true, prop: "deckCount", label: "桌台数量" },
      { sortable: true, prop: "manQty", label: "标准用餐人数" },
      { sortable: true, prop: "amount", label: "营业额" },
      { sortable: true, prop: "allAmount", label: "营业收入" },
      { sortable: true, prop: "reduceAmount", label: "优惠金额" },
      { sortable: true, prop: "quantity", label: "消费桌数" },
      { sortable: true, prop: "person", label: "用餐人数" },
      { sortable: true, prop: "avgPersonAmount", label: "折前人均" },
      { sortable: true, prop: "avgDiscountPersonAmount", label: "折后人均" },
      { sortable: true, prop: "avgDeskAmount", label: "折前桌均" },
      { sortable: true, prop: "avgDiscountDeskAmount", label: "折后桌均" }
    ];

    let columns = ref();
    columns.value = column1;
    // 合计
    interface SummaryMethodProps<T = any> {
      columns: TableColumnCtx<T>[];
      data: T[];
    }
    const summary = ref<any[]>([]);
    const dataCallback = (data: any) => {
      // console.log(data);
      summary.value = data.summary;
      return {
        list: data.list,
        total: data.total,
        pageNum: data.pageNum,
        pageSize: data.pageSize
      };
    };

    const getSummaries = (param: SummaryMethodProps) => {
      return summary.value;
    };

    const onSearch = () => {
      const appointType = proTable.value?.searchParam.appointType;
      switch (appointType) {
        case 1: {
          columns.value = column1;
          break;
        }
        case 2: {
          columns.value = column2;
          break;
        }

        default:
          break;
      }
    };

    return () => (
      <div class="table-box">
        <ProTable
          ref={proTable}
          title="餐区/桌台营业统计"
          row-key="id"
          columns={columns.value}
          request-api={getPageReport}
          init-param={initData}
          summary-method={getSummaries}
          data-callback={dataCallback}
          onSearch={onSearch}
        ></ProTable>
      </div>
    );
  }
});
